- return unless @group.group_project_template_available?
- expanded = expanded_by_default?

%section.settings.no-animate{ class: ('expanded' if expanded), data: { qa_selector: 'custom_project_templates_container' } }
  .settings-header
    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
      = s_('GroupSettings|Custom project templates')
    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
      = expanded ? _('Collapse') : _('Expand')
    %p.gl-text-secondary
      - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('user/group/custom_project_templates.md') }
      = s_('GroupSettings|Select a subgroup to use as a source of custom templates for new projects in this group. %{link_start}Learn more%{link_end}.').html_safe % { link_start: link_start, link_end: "</a>".html_safe }
  .settings-content
    = gitlab_ui_form_for @group, html: { multipart: true, class: 'gl-show-field-errors' }, authenticity_token: true do |f|
      %input{ type: 'hidden', name: 'update_section', value: 'js-custom-project-templates-settings' }
      = form_errors(@group)

      .js-vue-group-select{ data: { label: _('Select subgroup'), input_name: 'group[custom_project_templates_group_id]', input_id: 'group_custom_project_templates_group_id', groups_filter: 'subgroups', parent_id: @group.id, selected: @group.custom_project_templates_group_id, clearable: 'true' } }

      = f.submit _('Save changes'), pajamas_button: true , data: { qa_selector: 'save_changes_button' }
